<template>
	<view class="mine-user">
		<!-- 用户 -->
		<view class="box1" v-if="token">
			<image :src="$url.HOST + userdata.avatar" mode=""></image>
			<text class="lv"><image class="lv-img" src="../../static/mine/vip.png" mode="aspectFit"></image>{{userdata.distribution_name}}</text>
			<text class="sheb">{{$t('mine.id')}}:{{userdata.nickname | fomart}}</text>
			<button type="default" class="changez" @click="changeSysten">{{$t('mine.changeData')}}</button>
		</view>
		<view class="box1 untoken" v-else @click="login">
			<image class="defaultLogo" src="/static/mine/defaultLogo.png" mode=""></image>
			<view class="userbox">
				<view class="clickLogin">
					<text>{{$t('mine.systen.signIn')}}/{{$t('mine.systen.register')}}</text>
					<image src="/static/mine/go.png" mode=""></image>
				</view>
				<text class="tip">{{$t('mine.systen.clicktolog')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		inject: ['istoken'],
		props: ['userdata'],
		data() {
			return {
				token: ''
			};
		},
		filters: {
			'fomart': function(val) {
				if(val) {
					return val.replace(/([0-9]{3})([0-9]{4})([0-9]{4})/, '$1****$3')
				} else {
					return ''
				}
			}
		},
		mounted() {
			this.token = this.istoken()
		},
		methods:{
			changeSysten(){
				uni.navigateTo({
					url:'../../pages/idSafe/idSafe'
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.untoken {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 40rpx;
		image {
			width: 100%;
			height: 100%;
		}
		.defaultLogo {
			width: 134rpx;
			height: 134rpx;
			margin-right: 42rpx;
			margin-left: 60rpx;
			position: relative!important;
			left: 0;
			top: 0;
			flex-shrink: 0;
		}
		.userbox {
			display: flex;
			flex-direction: column;
			.clickLogin {
				display: flex;
				flex-direction: row;
				align-items: center;
				text {
					font-size: 30rpx;
					font-weight: 800;
					color: #207DFE;
					margin-bottom: 8rpx;
				}
				image {
					margin-left: 16rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
			.tip {
				font-size: 24rpx;
				font-weight: 400;
				color: #6E6E6E;
			}
		}
	}
.box1{
		width: 100%;
		height: 200rpx;
		position: relative;
	}
	.box1>image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		position: absolute;
		top: 40rpx;
		left: 60rpx;
	}
	
	.lv{
		position: absolute;
		top: 70rpx;
		left: 200rpx;
		font-size: 28rpx;
	}
	.lv-img{
		width: 30rpx;
		height: 30rpx;
		margin-right: 12rpx;
	}
	.sheb{
		position: absolute;
		top: 120rpx;
		left: 200rpx;
		font-size: .9em;
		opacity: .7;
	}
	.changez{
		position: absolute;
		font-size: .8em;
		top: 70rpx;
		right: 40rpx;
		width: 192rpx;
		height: 52rpx;
		line-height: 52rpx;
		background-color: #007AFF;
		border-radius: 26rpx;
		color: white;
	}
</style>
